<template>
    <div class="header">
        <div class="header-left">
            <div class="iconfont back-icon">&#xe624;</div>
        </div>
        <div class="header-input">
             <span class="iconfont">&#xe632;</span>
            输入城市/景点/游玩主题
        </div>
        <router-link to="/city" class="header-right" tag="div">
            {{ this.currentCity }}
             <span class="iconfont arrow-icon">&#xe64a;</span>        
        </router-link> 
        
    </div>   
</template>
<script>
import { mapState } from 'vuex'
export default {
    name:'HomeHeader', 
    props:{
        city:String
    },
    computed:{
        ...mapState({
            currentCity:'city'
        })
        // this.$store.state.city
    }


}


</script>
<style lang="stylus" scoped>
@import '~@/assets/styles/variables.styl'
.header
    display:flex
    line-height:$headerHeight
    background:$bgColor
    color:#fff
    .header-left
        width:0.64rem
        float:left
        .back-icon
            text-align:center
            font-size:.4rem
    .header-input
        flex:1
        height:.64rem
        line-height:.64rem
        margin-top:.12rem
        margin-left:.2rem
        margin-right:.2rem
        background:#fff
        border-radius:.1rem
        padding-left:.2rem
        color:#ccc

    .header-right
        min-width:1.04rem
        padding:0 .1rem
        float:right
        .arrow-icon
            font-size:.24rem
            margin-left:-.04rem
</style>
 